<template>
    <div class="banner"></div>
    <div class="container">
        <div class="dir-left-nowrap gap" style="margin-top: -140px;">
            <div class="dir-top-nowrap gap l">
                <IndexNavigation></IndexNavigation>
                <IndexSubareaRecommend></IndexSubareaRecommend>
            </div>
            <div class="dir-top-nowrap gap r">
                <ClientOnly>
                    <IndexUserInfo></IndexUserInfo>
                </ClientOnly>
                <IndexDailyRecommendation></IndexDailyRecommendation>
                <IndexMyAuthorAndCommunity></IndexMyAuthorAndCommunity>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { IndexNavigation, IndexDailyRecommendation, IndexMyAuthorAndCommunity, IndexSubareaRecommend, IndexUserInfo, AppIcon } from "#components";


</script>

<style lang="scss" scoped>
.banner {
    height: 670px;
    background: url("/imgs/index/banner.png") no-repeat center/cover;
}

.l {
    width: 1220px;
}

.r {
    width: 440px;
}
</style>